// 1、页面效果
functionOfPage();

function functionOfPage() {
    const localUrl = "http://localhost:3000";
    // new TaobaoSearch();
    // Ajax获取公共的静态页面
    $(".top").load(`/public/publicPage.html #top`);
    $(".bottomBox").load(`/public/publicPage.html #bottomBox`);
    $(".footer").load(`/public/publicPage.html #footer`);

    // 淘宝模糊搜索
    class TaobaoSearch {
        constructor(url) {
            this.search = document.querySelector('.searchInput');
            this.list = document.querySelector('.searchList');
            this.url = url;
            this.msg = [];
            this.addEvent();
        }
        addEvent() {
            const that = this;
            this.search.oninput = function () {
                that.key = this.value;
                $('.searchList').css({
                    'display': 'block'
                });
                $('.placeholder').css({
                    'display': 'none'
                });
                that.jsonp();
            }
        }
        jsonp() {
            const that = this;
            window.callbackFn = function (res) {
                if (res.result.length) {
                    that.msg = res.result;
                    that.createList();
                }
            }
            const s = document.createElement('script');
            this.url = this.url + '?' + this.objToQuery();
            s.src = this.url;
            document.body.appendChild(s);
        }
        objToQuery() {
            const data = {
                k: 1,
                area: "c2c",
                q: this.key,
                code: "utf-8",
                ts: 1652512732893,
                callback: "callbackFn"
            };
            let str = "";
            if (Object.keys(data).length !== 0) {
                for (let i in data) {
                    str += `${i}=${data[i]}&`;
                }
            }
            return str.slice(0, -1);
        }
        createList() {
            let str = "";
            this.msg.forEach(val => {
                str += `<li>${val[0]}</li>`;
            });
            this.list.innerHTML = str;
        }
    }
    new TaobaoSearch("https://suggest.taobao.com/sug");

    // 事件 - 模糊搜索
    $('.searchInput').on("oninput", function () {
        $('.searchList').css({
            'display': 'block'
        });
        $('.placeholder').css({
            'display': 'none'
        });
    })

    // 1、nav导航滚动时固定显示
    $(document).on('scroll', function () {
        let top = $(this).scrollTop();
        if (top >= 30) {
            $('.headSearchBox').css({
                'position': 'fixed',
                'height': 50,
                'border-bottom': '1px solid #ddd',
                'box-shadow': '0 0 10px rgb(0 0 0 / 20%)'
            }).find('.headerCart').show();
            $('.logoRight').removeClass('flex-c-around');
            $('.logo').height(40);
            $('.headerCart').hide();
        } else {
            $('.headSearchBox').css({
                'position': 'static',
                'height': 100,
                'border-bottom': 'none',
                'box-shadow': 'none'
            }).find('.headerCart').show();
            $('.logoRight').addClass('flex-c-around');
            $('.logo').height(66);
        }
        if (top >= 540) {
            $('.indexLeft').css({
                top: 450
            });
            $('.indexRight').css({
                top: 450
            })
        }
    })

    // 2、搜索提示框样式
    $('.searchInput').on('focus', function () {
        $('.placeholder').css({
            'display': 'none'
        });
    }).on('blur', function () {
        if (!this.value) {
            $('.placeholder').css({
                'display': 'block'
            });
        }
    });

    // 点击搜索按钮
    $('.searchBtn').on('click', function (ev) {
        let searchStr = $('.placeholder').text();
        if ($('.searchInput').val()) {
            // console.log($('.searchInput').val());
            searchStr = $('.searchInput').val();
        }
        location.assign("./list.html?key=" + searchStr);
    }).on('mousedown', function (ev) {
        const e = ev || window.event;
        e.preventDefault();
    })
    $('.headerSearch').on('mouseleave', function () {
        $('.searchList').css({
            'display': 'none'
        });
    });

    // 点击搜索出来的列表项
    $('.searchList').on('click', "li", function (ev) {
        const e = ev || window.event;
        $(".searchInput").val($(this).text()).siblings(".searchList").hide();
    })

    // 3、二级菜单效果
    $('.seconAndMenu').on('mouseover', '.categoryList li', function () {
        $('.secondMenuBox').css('display', 'flex');
        $('.secondMenuBox').find('.secondMenu').eq($(this).index()).css('display', 'flex').siblings().hide();
    }).on('mouseleave', function () {
        $(this).children('.secondMenuBox').hide();
    });

    // 4、热门品牌鼠标经过效果
    $('.hotLogoItem').on('mouseover', 'li', function () {
        $(this).find('.logoImgBox').stop().animate({
            'width': 90,
            'height': 90
        });
        $(this).find('.specialInfo').hide().end().find('.logoBoxCon').show();
    }).on('mouseout', 'li', function () {
        $(this).find('.logoImgBox').stop().animate({
            'width': 120,
            'height': 120
        });
        $(this).find('.logoBoxCon').hide().end().find('.specialInfo').show();
    });

}